<template>
  <v-chart class="chart" :option="option" autoresize />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import VChart from 'vue-echarts';
import { use } from 'echarts/core';
import { PieChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, LegendComponent, ToolboxComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

use([CanvasRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent, ToolboxComponent]);

const option = ref({
  title: { text: '教学资源类型分布', left: 'center' },
  tooltip: { trigger: 'item' },
  legend: { orient: 'vertical', left: 'left' },
  toolbox: { feature: { dataView: {}, saveAsImage: {} } },
  series: [{
    name: '资源类型',
    type: 'pie',
    radius: '50%',
    data: [
      { value: 335, name: '视频' },
      { value: 310, name: '文档' },
      { value: 234, name: '试题' },
      { value: 135, name: '互动' }
    ],
    emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }
  }]
});
</script>

<style scoped>.chart { width: 100%; height: 100%; }</style>